import React, { PureComponent } from 'react'
import CoreLayout from 'containers/layout'
import { Table, Button, Icon, Row, Col, Tooltip, Divider, Input, Dropdown, Menu, Popconfirm, message } from 'antd'
import PubSub from 'pubsub-js'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { adminsGroupActions } from 'reduxs'
import _ from 'lodash'
import Modal from 'kenote-react-admin-modal'
import { getDataSource, showTeam, getPageFlag, getFlagValue } from 'services/utils'

const accessFlag = getPageFlag('/admins/group', 'access')
const createFlag = getPageFlag('/admins/group', 'create')
const editFlag = getPageFlag('/admins/group', 'edit')
const flagFlag = getPageFlag('/admins/group', 'flag')
const removeFlag = getPageFlag('/admins/group', 'remove')
const MenuItem = Menu.Item

@connect(
  state => ({
    editPending         : state.AdminsGroup.editPending,
    removePending       : state.AdminsGroup.removePending,
    removeError         : state.AdminsGroup.removeError,
    removeMessage       : state.AdminsGroup.removeMessage,
    getListPending      : state.AdminsGroup.getListPending,
    getListError        : state.AdminsGroup.getListError,
    getListMessage      : state.AdminsGroup.getListMessage,
    listData            : state.AdminsGroup.listData,
    auth                : state.Passport.auth,
    teams               : state.Passport.teams
  }),
  dispatch => ({
    actions: bindActionCreators({...adminsGroupActions}, dispatch)
  })
)
export default class AdminsGroup extends PureComponent {

  state = {
    
  }

  constructor (props) {
    super(props)
  }
  
  componentDidMount () {
    this.props.actions.getlist()
  }
  
  componentWillReceiveProps (nextProps) {
    const { getListError, getListMessage, removeError, removeMessage } = nextProps
    getListError > 0 && getListError !== 1001 && message.error(getListMessage)
    removeError > 0 && message.error(removeMessage)
  }

  render () {
    const { location, getListPending, editPending, removePending, listData, auth, teams, getListError } = this.props
    const { group } = auth
    const options = {
      location,
      pageCode: accessFlag.value,
      breadcrumb: [
        { name: '主页', link: '/' },
        { name: '帐号管理' },
        { name: '用户组设定' }
      ],
      errCode: getListError
    }
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        //fixed: 'left'
      },
      {
        title: '用户组',
        dataIndex: 'name',
        key: 'name',
        width: 150,
        //render: (text, record) => this.renderColumns(text, record, 'name') ,
      },
      {
        title: '团队',
        dataIndex: 'team',
        key: 'team',
        width: 150,
        render: (team) => (<span>{showTeam(team, teams)}</span>) ,
      },
      {
        title: '权级',
        dataIndex: 'level',
        key: 'level',
        width: 100,
        //render: (text, record) => this.renderColumns(text, record, 'level'),
        //sorter: (a, b) => a.level - b.level,
      },
      {
        title: '人数',
        dataIndex: 'counts',
        key: 'counts',
        width: 100,
        align: 'center'
      },
      {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc',
        //width: 100,
        render: (desc) => (
          <span className="overflower">
            {desc}
          </span>
        ),
        
      },
      {
        title: '操作',
        key: 'action',
        width: 300,
        render: (text, record) => (
          <span>
            <a 
              onClick={() => {
                PubSub.publish('OPEN_MODAL', ['EditAdminsGroupModal', { id: record._id }])
              }}
              disabled={getFlagValue(auth, editFlag.value, null)}
              >
              编辑
            </a>
            <Divider type="vertical" />
            <a 
              onClick={() => {
                PubSub.publish('OPEN_MODAL', ['FlagAdminsGroupModal', { id: record._id }])
              }} 
              disabled={record.level === 9999 || getFlagValue(auth, flagFlag.value, null)}
              >
              权限
            </a>
            <Divider type="vertical" />
            <a 
              onClick={() => {
                PubSub.publish('OPEN_MODAL', ['SettAdminsGroupModal', { id: record._id, type: 'proto' }])
              }} 
              disabled={record.level === 9999 || getFlagValue(auth, flagFlag.value, null)}
              >
              线路
            </a>
            <Divider type="vertical" />
            <a 
              onClick={() => {
                PubSub.publish('OPEN_MODAL', ['SettAdminsGroupModal', { id: record._id, type: 'paths' }])
              }} 
              disabled={record.level === 9999 || getFlagValue(auth, flagFlag.value, null)}
              >
              渠道
            </a>
            <Divider type="vertical" />
            <Popconfirm
              title="确定要删除吗？"
              onConfirm={() => {
                console.log('delete')
                this.props.actions.remove(record._id)
              }}
              >
              <a disabled={record.level === 9999 || record.counts > 0 || getFlagValue(auth, removeFlag.value, null)}>删除</a>
            </Popconfirm>
          </span>
        )
      },
    ]
    const dataSource = getDataSource(listData, { 
      key: '_id', 
      //query: o => o.level > 1000,
      order: [['id', 'level'], ['asc', 'desc']] 
    })
    return (
      <CoreLayout {...options}>
        <Row style={{ marginBottom: 20 }}>
          <Col span={20}>
            <Button 
              onClick={() => PubSub.publish('OPEN_MODAL', 'AddAdminsGroupModal')}
              disabled={getFlagValue(auth, createFlag.value, null)}
              >
              创建用户组
            </Button>
          </Col>
          <Col span={4} style={{ textAlign: 'right' }}>
            <Tooltip title="刷新">
              <Button shape="circle" style={{ border: 0 }} onClick={() => this.props.actions.getlist()}>
                <Icon type="sync" spin={getListPending} />
              </Button>
            </Tooltip>
          </Col>
        </Row>
        <Table 
          columns={columns} 
          dataSource={dataSource} 
          loading={getListPending || removePending} 
          pagination={true} 
          bordered={false} 
          />
      </CoreLayout>
    )
  }
}